<template>
  <div v-show="optionsType !== 'page'">
    <!-- 左 -->
    <div
      :style="{
        height: elm.height + 'px',
        top: elm.top + 'px',
        left: elm.left + 'px',
      }"
      class="verti"
      @mousedown="handlemousedown($event, 'left', 'left', 'width')"
    >
      <div class="square" />
    </div>

    <!-- 右 -->
    <div
      :style="{
        height: elm.height + 'px',
        top: elm.top + 'px',
        left: elm.left + elm.width + 'px',
      }"
      class="verti"
      @mousedown="handlemousedown($event, 'right', 'width')"
    >
      <div class="square" />
    </div>

    <!-- 上 -->
    <div
      :style="{
        width: elm.width + 'px',
        top: elm.top + 'px',
        left: elm.left + 'px',
      }"
      class="horiz"
      @mousedown="handlemousedown($event, 'up', 'top', 'height')"
    >
      <div class="square" />
    </div>

    <!-- 下 -->
    <div
      :style="{
        width: elm.width + 'px',
        top: elm.top + elm.height + 'px',
        left: elm.left + 'px',
      }"
      class="horiz"
      @mousedown="handlemousedown($event, 'down', 'height')"
    >
      <div class="square" />
    </div>
  </div>
</template>

<script>
import { defineComponent, computed, getCurrentInstance, ref } from "vue-demi";
import { getVptd } from "../../utils/compat";
export default defineComponent({
  name: "size-control",
  setup() {
    const typeRef = ref("");
    const instance = getCurrentInstance();
    const vptd = getVptd(instance);
    const optionsType = computed(() => {
      return vptd.state.type;
    });
    const elm = computed(() => {
      let target = vptd.state.activeElement;
      if (!target.resizable) return "";
      return target;
    });

    const handlemousedown = (e, type, originX, originY) => {
      e.stopPropagation();
      typeRef.value = type;

      vptd.commit("initmove", {
        startX: e.pageX,
        startY: e.pageY,
        originX: elm.value?.[originX],
        originY: elm.value?.[originY],
      });

      document.addEventListener("mousemove", handlemousemove, true);
      document.addEventListener("mouseup", handlemouseup, true);
    };

    const handlemousemove = (e) => {
      e.stopPropagation();
      e.preventDefault();

      vptd.commit("resize", {
        x: e.pageX,
        y: e.pageY,
        type: typeRef.value,
      });
    };
    const handlemouseup = () => {
      document.removeEventListener("mousemove", handlemousemove, true);
      document.removeEventListener("mouseup", handlemouseup, true);
      vptd.commit("stopmove");
    };
    return {
      optionsType,
      elm,
      typeRef,
      handlemousedown,
      handlemousemove,
      handlemouseup,
    };
  },
});
</script>

<style>
.verti,
.horiz {
  position: absolute;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.verti {
  width: 0;
  cursor: ew-resize;
}
.horiz {
  height: 0;
  cursor: ns-resize;
}
.square {
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  border: 1px solid #2196f3;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
